<!--
 * @Author: your name
 * @Date: 2020-10-19 15:29:38
 * @LastEditTime: 2020-10-19 15:51:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\test\color.vue
-->
<template>
<div class="container" :style="{'--primary-bgcolor':colorObj.bgColor,'--primary-color':colorObj.Color}">
<HeadNav title="配置颜色"></HeadNav>
<van-button @click="Change" type="primary" class="btn-color">点击切换颜色</van-button>
</div>
</template>

<script>
export default {
    data(){
        return{
            type:'primary'
        }
    },
    computed:{
        colorObj(){
            if(this.type=='primary'){
                return{
                    bgColor: 'blue',
                    Color:'#fff',
                }
            }else{
                return {
                    bgColor: '#fe4d3d',
                    Color:'#fff',
                }
            }
        }
    },
    methods:{
        // 切换颜色
        Change(){
            if(this.type == 'primary'){
                this.type = '';
            }else{
                this.type = 'primary';
            }
        }
    }
}
</script>

<style lang="less" scoped>
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-color{
    background:var(--primary-bgcolor);
    color:var(--primary-color);
    transition: all 1s;
    width: 300px;
    height: 300px;
}
</style>